<template>
  <div class="login-account">
    <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
      <el-form-item label="账号:" prop="name">
        <el-input v-model="account.name"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="account.password" show-password></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {defineComponent,reactive ,ref} from 'vue'
import {ElForm} from 'element-plus/lib/index'
import {rules} from '../config/account-config'
import localCache from '../../../utils/cache'
import {useStore} from 'vuex'
export default defineComponent({
  setup(){
    const store = useStore()
    const account = reactive({
      name:localCache.getCache('name'),
      password:localCache.getCache('password')
    })
    //拿到ElForm的类型  这里的ElForm实际上是一个组件的描述
    const formRef = ref<InstanceType<typeof ElForm>>()
    const loginAction = (isKeepPassword:boolean)=>{
        // console.log('开始登录~~~');
        formRef.value?.validate((valid)=>{
          if(valid){
            // console.log('真正开始执行登录')
            //1.判断是否需要记住密码
            if(isKeepPassword){
              //本地缓存
              localCache.setCache('name',account.name)
              localCache.setCache('password',account.password)
            }
          }else{
            localCache.deleteCache('name')
            localCache.deleteCache('password')
          }

          //2.开始执行验证登录
          store.dispatch('loginModule/accountLoginAction',{...account})
        })
    }

    return {
      account,
      rules,
      loginAction,
      formRef
    }
  }
})
</script>

<style lang="less">

</style>